Audio音訊數值操作(頻域)

今天要來整理音訊來源的相關數值的操作，其中音訊來源包括音樂檔及麥克風，LineIn等。

頻域分析

從麥克風讀取音頻數據

使用 fft.setInput(mic); 設定頻域分析的音訊來源為麥克風 mic。
使用 spectrum = fft.analyze(); 取得頻域數值
其中取樣長度為 1024，

let can;
let mic;
let fft;
let spectrum;
let sp_len = 0;

function setup() {

	can = createCanvas(400, 400);
	can.id("can1");
	can.class("c1");
	can.position(10, 10);
	background(0);

	mic = new p5.AudioIn();
	fft = new p5.FFT();
	mic.getSources((devices) => {
		let device_name = "外接麥克風";
		devices.forEach((dev) => {
			if (dev.label.indexOf(device_name) != -1 && dev.kind == 'audioinput') {
				console.log(dev.deviceId + ", " + dev.kind + ", " + dev.label);
				mic.setSource(0);
				mic.amp(0.5);
				fft.setInput(mic);
			}
		});
	});

}

function draw() {
	background(0);
	spectrum = fft.analyze();
	sp_len = spectrum.length-100;

	for (let i = 0; i < sp_len; i++) {
		let x = map(i, 0, sp_len, 0, 400);
		let h = 380 - map(spectrum[i], 0, 255, 0, 300);
		stroke(255, 255, 0);
		line(x, 380, x, h);
	}
}

function keyPressed(e) {
	console.log(e);
	if (e.key == 'a') {
		mic.start();  //-- 在此執行start()，stop()才會有作用
	} else if (e.key == 'q') {
		mic.stop();
	}
}

執行結果

從音樂檔讀取音頻數據

先在preload程式區段載入音樂檔
sound = loadSound('assets/canon.mp3');
sound.amp(0.2); 設定音量大小
fft = new p5.FFT(); 建立 FFT 物件
fft.setInput(sound); 設定分析音源來源

let can;
let mic;
let fft;
let spectrum;
let sp_len = 0;
let sound;
function preload() {
	sound = loadSound('assets/canon.mp3', () => {
		sound.amp(0.2);
	});
}

function setup() {
	can = createCanvas(400, 400);
	can.id("can1");
	can.class("c1");
	can.position(10, 10);
	background(0);

	mic = new p5.AudioIn();
	fft = new p5.FFT();
	fft.setInput(sound);
}

function draw() {
	background(0);
	spectrum = fft.analyze();
	sp_len = spectrum.length-100;

	for (let i = 0; i < sp_len; i++) {
		let x = map(i, 0, sp_len, 0, 400);
		let h = 380 - map(spectrum[i], 0, 255, 0, 300);
		stroke(255, 255, 0);
		line(x, 380, x, h);
	}
}

function keyPressed(e){
	console.log(e);
  if(e.key == 'a'){
	sound.loop();
  } else if(e.key == 'q'){
	sound.pause();
  }
}

參考資料
p5.FFT
https://p5js.org/reference/#/p5.FFT
analyze()
https://p5js.org/reference/#/p5.FFT/analyze
waveform()
https://p5js.org/reference/#/p5.FFT/waveform